From 8d212ae5c20d08cbbac9da12bd358059c14f8884 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Mon, 7 Nov 2016 22:34:02 +0100 Subject: [PATCH] Adwaita: tweak radial-gradient()'s radial-gradient()'s are behaving, hence simplify the css. --- gtk/theme/Adwaita/_common.scss | 10 ++++------ gtk/theme/Adwaita/_drawing.scss | 4 ++-- gtk/theme/Adwaita/gtk-contained-dark.css | 22 +++++++++++----------- gtk/theme/Adwaita/gtk-contained.css | 22 +++++++++++----------- 4 files changed, 28 insertions(+), 30 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index a00def2593..430ae8dd5c 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -419,8 +419,8 @@ treeview entry { $_dot_color: if($variant=='light', $selected_bg_color, lighten($selected_bg_color,15%)); @keyframes needs_attention { - from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); } - to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); } + from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); } + to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); } } %button, @@ -787,11 +787,9 @@ button { // simulates the shadow labels and icons normally have in buttons. animation: needs_attention 150ms ease-in; $_dot_shadow: _text_shadow_color(); // shadow color - $_dot_shadow_r: if($variant == 'light', 70%, 69%); // the radii of the shadow is different in - // dark variant to dim the intensity a bit - background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%), - radial-gradient($_dot_shadow 68%, transparentize($_dot_shadow, 1) $_dot_shadow_r); + background-image: radial-gradient(farthest-side, $_dot_color 96%, transparentize($_dot_color,1 )), + radial-gradient(farthest-side, $_dot_shadow 95%, transparentize($_dot_shadow, 1)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index be410b567c..f1231a9197 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -545,11 +545,11 @@ @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } - $_small_gradient: radial-gradient(ellipse farthest-side at $p, + $_small_gradient: radial-gradient(farthest-side at $p, $_small_gradient_color 85%, transparentize($_small_gradient_color, 1)); - $_big_gradient: radial-gradient(ellipse farthest-side at $p, + $_big_gradient: radial-gradient(farthest-side at $p, $_big_gradient_color, transparentize($_big_gradient_color, 1)); diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index b2c3fb0548..7f765749ef 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -396,9 +396,9 @@ treeview entry.flat, treeview entry { ***********/ @keyframes needs_attention { from { - background-image: radial-gradient(#3583d5 0%, rgba(53, 131, 213, 0) 0%); } + background-image: radial-gradient(farthest-side, #3583d5 0%, rgba(53, 131, 213, 0) 0%); } to { - background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%); } } + background-image: radial-gradient(farthest-side, #3583d5 95%, rgba(53, 131, 213, 0)); } } notebook > header > tabs > arrow, button.titlebutton, button { min-height: 24px; @@ -1188,7 +1188,7 @@ button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; - background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%), radial-gradient(rgba(0, 0, 0, 0.82745) 68%, transparent 69%); + background-image: radial-gradient(farthest-side, #3583d5 96%, rgba(53, 131, 213, 0)), radial-gradient(farthest-side, rgba(0, 0, 0, 0.82745) 95%, transparent); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 2px; } @@ -3794,7 +3794,7 @@ actionbar > revealer > box { scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { - background-image: radial-gradient(ellipse farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-image: radial-gradient(farthest-side at top, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at top, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; @@ -3802,7 +3802,7 @@ scrolledwindow overshoot.top { border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { - background-image: radial-gradient(ellipse farthest-side at top, #202425 85%, rgba(32, 36, 37, 0)); + background-image: radial-gradient(farthest-side at top, #202425 85%, rgba(32, 36, 37, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; @@ -3810,7 +3810,7 @@ scrolledwindow overshoot.top { border: none; box-shadow: none; } scrolledwindow overshoot.bottom { - background-image: radial-gradient(ellipse farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-image: radial-gradient(farthest-side at bottom, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at bottom, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; @@ -3818,7 +3818,7 @@ scrolledwindow overshoot.bottom { border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { - background-image: radial-gradient(ellipse farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0)); + background-image: radial-gradient(farthest-side at bottom, #202425 85%, rgba(32, 36, 37, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; @@ -3826,7 +3826,7 @@ scrolledwindow overshoot.bottom { border: none; box-shadow: none; } scrolledwindow overshoot.left { - background-image: radial-gradient(ellipse farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-image: radial-gradient(farthest-side at left, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at left, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; @@ -3834,7 +3834,7 @@ scrolledwindow overshoot.left { border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { - background-image: radial-gradient(ellipse farthest-side at left, #202425 85%, rgba(32, 36, 37, 0)); + background-image: radial-gradient(farthest-side at left, #202425 85%, rgba(32, 36, 37, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; @@ -3842,7 +3842,7 @@ scrolledwindow overshoot.left { border: none; box-shadow: none; } scrolledwindow overshoot.right { - background-image: radial-gradient(ellipse farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(ellipse farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); + background-image: radial-gradient(farthest-side at right, #040404 85%, rgba(4, 4, 4, 0)), radial-gradient(farthest-side at right, rgba(238, 238, 236, 0.07), rgba(238, 238, 236, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; @@ -3850,7 +3850,7 @@ scrolledwindow overshoot.right { border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { - background-image: radial-gradient(ellipse farthest-side at right, #202425 85%, rgba(32, 36, 37, 0)); + background-image: radial-gradient(farthest-side at right, #202425 85%, rgba(32, 36, 37, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 29db4e89fa..78f4caf0b3 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -396,9 +396,9 @@ treeview entry.flat, treeview entry { ***********/ @keyframes needs_attention { from { - background-image: radial-gradient(#4a90d9 0%, rgba(74, 144, 217, 0) 0%); } + background-image: radial-gradient(farthest-side, #4a90d9 0%, rgba(74, 144, 217, 0) 0%); } to { - background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%); } } + background-image: radial-gradient(farthest-side, #4a90d9 95%, rgba(74, 144, 217, 0)); } } notebook > header > tabs > arrow, button.titlebutton, button { min-height: 24px; @@ -1191,7 +1191,7 @@ button.needs-attention > label, .stack-switcher > button.needs-attention > image, stacksidebar row.needs-attention > label { animation: needs_attention 150ms ease-in; - background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%), radial-gradient(rgba(255, 255, 255, 0.76923) 68%, rgba(255, 255, 255, 0) 70%); + background-image: radial-gradient(farthest-side, #4a90d9 96%, rgba(74, 144, 217, 0)), radial-gradient(farthest-side, rgba(255, 255, 255, 0.76923) 95%, rgba(255, 255, 255, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } @@ -3825,7 +3825,7 @@ actionbar > revealer > box { scrolledwindow viewport.frame { border-style: none; } scrolledwindow overshoot.top { - background-image: radial-gradient(ellipse farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-image: radial-gradient(farthest-side at top, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at top, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: top; @@ -3833,7 +3833,7 @@ scrolledwindow overshoot.top { border: none; box-shadow: none; } scrolledwindow overshoot.top:backdrop { - background-image: radial-gradient(ellipse farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-image: radial-gradient(farthest-side at top, #c0c0bd 85%, rgba(192, 192, 189, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: top; @@ -3841,7 +3841,7 @@ scrolledwindow overshoot.top { border: none; box-shadow: none; } scrolledwindow overshoot.bottom { - background-image: radial-gradient(ellipse farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-image: radial-gradient(farthest-side at bottom, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at bottom, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); background-size: 100% 3%, 100% 50%; background-repeat: no-repeat; background-position: bottom; @@ -3849,7 +3849,7 @@ scrolledwindow overshoot.bottom { border: none; box-shadow: none; } scrolledwindow overshoot.bottom:backdrop { - background-image: radial-gradient(ellipse farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-image: radial-gradient(farthest-side at bottom, #c0c0bd 85%, rgba(192, 192, 189, 0)); background-size: 100% 3%; background-repeat: no-repeat; background-position: bottom; @@ -3857,7 +3857,7 @@ scrolledwindow overshoot.bottom { border: none; box-shadow: none; } scrolledwindow overshoot.left { - background-image: radial-gradient(ellipse farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-image: radial-gradient(farthest-side at left, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at left, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: left; @@ -3865,7 +3865,7 @@ scrolledwindow overshoot.left { border: none; box-shadow: none; } scrolledwindow overshoot.left:backdrop { - background-image: radial-gradient(ellipse farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-image: radial-gradient(farthest-side at left, #c0c0bd 85%, rgba(192, 192, 189, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: left; @@ -3873,7 +3873,7 @@ scrolledwindow overshoot.left { border: none; box-shadow: none; } scrolledwindow overshoot.right { - background-image: radial-gradient(ellipse farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(ellipse farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); + background-image: radial-gradient(farthest-side at right, #9d9d99 85%, rgba(157, 157, 153, 0)), radial-gradient(farthest-side at right, rgba(46, 52, 54, 0.07), rgba(46, 52, 54, 0)); background-size: 3% 100%, 50% 100%; background-repeat: no-repeat; background-position: right; @@ -3881,7 +3881,7 @@ scrolledwindow overshoot.right { border: none; box-shadow: none; } scrolledwindow overshoot.right:backdrop { - background-image: radial-gradient(ellipse farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0)); + background-image: radial-gradient(farthest-side at right, #c0c0bd 85%, rgba(192, 192, 189, 0)); background-size: 3% 100%; background-repeat: no-repeat; background-position: right; -- 2.30.2